<template>
  <div>
    <van-overlay :show="show" @click="show = false">
      <div class="bg_fff bkra8 apply_detail" @click.stop>
        <ApplyItem :item="applyInfo"></ApplyItem>
        <div class="plr_12">
          <div class="detail_wrap">
            <div class="fl vstart dx_14 lh_24">
              <div class="w70 fls color_8c">申领类型</div>
              <div class="fl1 color_333">{{ applyInfo.applicationType === 0 ? '免费申领' : '付费申领' }}</div>
            </div>
            <div class="fl vstart dx_14 mt8 lh_24">
              <div class="w70 fls color_8c">发货状态</div>
              <div class="fl1 color_333">{{ applyInfo.expressStatus === 22 ? '待发货' : applyInfo.expressStatus === 30 ? '已发货' : applyInfo.expressStatus === 35 ? '已收货' : '-' }}</div>
            </div>
            <div class="fl vstart dx_14 mt8 lh_24">
              <div class="w70 fls color_8c">申领任务</div>
              <div class="fl1 color_success" @click="showTaskInfo">点击查看</div>
            </div>
            <div class="fl vstart dx_14 mt8 lh_24">
              <div class="w70 fls color_8c">申领来源</div>
              <div class="fl1 color_333">{{ applyInfo.receiverSourceType === 0 ? '正常申领' : applyInfo.receiverSourceType === 10 ? '扫码绑本' : applyInfo.receiverSourceType === 20 ? '发行授权' : '-' }}</div>
            </div>
            <div class="fl vstart dx_14 mt8 lh_24">
              <div class="w70 fls color_8c">申领时间</div>
              <div class="fl1 color_333">{{ timeStampToTime(applyInfo.receiveTime, 'Y-m-d H:i:s') }}</div>
            </div>
            <div class="fl vstart dx_14 mt8 lh_24">
              <div class="w70 fls color_8c">申领备注</div>
              <div class="fl1 color_333">{{ applyInfo.remark || '-' }}</div>
            </div>
          </div>
          <div class="btn_wrap flvcc" v-if="applyInfo.receiveStatus == 10 || applyInfo.receiveStatus == 17 || (applyInfo.receiveStatus == 20 && (applyInfo.expressStatus == 22 || applyInfo.expressStatus == 30))">
            <div class="common_btn flvcc bk_dc color_fail mr10" v-if="applyInfo.receiveStatus == 10 || applyInfo.receiveStatus == 17" @click="handleRefuse()">拒绝</div>
            <div class="common_btn flvcc bg_d1" v-if="applyInfo.receiveStatus == 10 || applyInfo.receiveStatus == 17" @click="handlePass()">通过</div>
            <div class="common_btn flvcc bk_dc mr10" v-if="applyInfo.receiveStatus == 20 && (applyInfo.expressStatus == 22 || applyInfo.expressStatus == 30)" @click="openReceiveGoods()">确认收货</div>
            <div class="common_btn flvcc bg_d1" v-if="applyInfo.receiveStatus == 20 && applyInfo.expressStatus == 22" @click="openDeliverGoods()">发货</div>
          </div>
        </div>
      </div>
      <!-- <van-dialog v-model="showDeliver" title="确认发货" show-cancel-button :beforeClose="beforeClose">
        <van-field v-model="expressNo" placeholder="请输入物流单号" />
      </van-dialog> -->
    </van-overlay>
    <TaskInfo ref="TaskInfo"></TaskInfo>
  </div>
</template>

<script>
import { Overlay, Dialog, Toast, Field  } from 'vant';
import ApplyItem from './ApplyItem.vue'
import TaskInfo from './TaskInfo.vue'
import { 
  agreeApplication,
  refuseApplication,
  deliverGoods,
  receiveGoods
} from '@/api/apply.js'
import { timeStampToTime } from '@/utils/util'
export default {
  components: {
    [Overlay.name]: Overlay,
    [Dialog.Component.name]: Dialog.Component,
    [Field .name]: Field ,
    [Overlay.name]: Overlay,
    ApplyItem,
    TaskInfo
  },

  props: {
  },
  data() {
    return {
      timeStampToTime,
      show: false,
      showDeliver: false,
      expressNo: '',
      applyInfo: {}
    };
  },

  methods: {
    initData(item, index) {
      this.applyInfo = item
      this.applyIndex = index
      this.show = true
    },

    // 查看申领任务
    showTaskInfo() {
      this.$refs.TaskInfo.initData(this.applyInfo.receiveId)
    },

    // 通过申领
    async handlePass() {
      Dialog.confirm({
        title: '提示',
        message: '确定要通过该申领吗?',
      })
        .then(async () => {
          try {
            const params = {
              request: {
                dto: {
                  receiveId: this.applyInfo.receiveId
                }
              }
            }
            const res = await agreeApplication(params)
            if (res.errorCode === 0) {
              Toast('操作成功');
              this.show = false
              this.applyInfo.receiveStatus = 20
              this.$emit('refresh', this.applyInfo, this.applyIndex)
            }
          } catch (error) {
            console.log(error)
          }
        })
        .catch(() => {
          // on cancel
        });
    },

    // 拒绝申领
    async handleRefuse() {
      Dialog.confirm({
        title: '提示',
        message: '确定要拒绝该申领吗?',
      })
        .then(async () => {
          try {
            const params = {
              request: {
                dto: {
                  receiveId: this.applyInfo.receiveId,
                  reason: ''
                }
              }
            }
            const res = await refuseApplication(params)
            if (res.errorCode === 0) {
              Toast('操作成功');
              this.show = false
              this.applyInfo.receiveStatus = 30
              this.$emit('refresh', this.applyInfo, this.applyIndex)
            }
          } catch (error) {
            console.log(error)
          }
        })
        .catch(() => {
          // on cancel
        });
    },

    openDeliverGoods() {
      Dialog.confirm({
        title: '提示',
        message: '确认发货吗?',
      })
        .then(async () => {
          try {
            const params = {
              request: {
                dto: {
                  receiveId: this.applyInfo.receiveId
                }
              }
            }
            const res = await deliverGoods(params)
            if (res.errorCode === 0) {
              Toast('操作成功');
              this.show = false
              this.applyInfo.expressStatus = 30
              this.$emit('refresh', this.applyInfo, this.applyIndex)
            }
          } catch (error) {
            console.log(error)
          }
        })
        .catch(() => {
          // on cancel
        });
    },


    // 已收货
    openReceiveGoods() {
      Dialog.confirm({
        title: '提示',
        message: '即将确认收货，是否继续?',
      })
        .then(async () => {
          try {
            const params = {
              request: {
                dto: {
                  receiveId: this.applyInfo.receiveId
                }
              }
            }
            const res = await receiveGoods(params)
            if (res.errorCode === 0) {
              Toast('操作成功');
              this.show = false
              this.applyInfo.expressStatus = 35
              this.$emit('refresh', this.applyInfo, this.applyIndex)
            }
          } catch (error) {
            console.log(error)
          }
        })
        .catch(() => {
          // on cancel
        });
    },

  }
};
</script>

<style lang="less">
.apply_detail {
  width: 90%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.plr_12 {
  padding: 0 12px;
}
.lh_24 {
  line-height: 24px;
}
.bk_97 {
  border: 1px solid #979797;
}
.detail_wrap {
  padding: 8px 0;
  border-top: 1px dashed #E7E7E7;
}
.btn_wrap {
  padding: 12px 0;
  border-top: 1px dashed #E7E7E7;
}

</style>
